<template>
  <div id="main" class="my-scroller" :style="{width:mainSize.width,height:mainSize.height}">
    <router-view v-if="isAppAgreement" v-show="isInit"/>
    <my-nav v-if="isAppAgreement" :max-width="navMaxWidth" :top="navTop" v-show="isInit"/>
    <send-sms-dialog/>
    <product-choose-model-dialog/>
    <cart-submit-dialog/>
    <shop-send-time-dialog/>
    <choose-date-time-dialog/>
    <choose-date-dialog/>
    <order-express-more-dialog/>
    <choose-log-form-dialog/>
    <choose-sex-dialog/>
    <choose-product-classify-dialog/>
    <choose-coupon-dialog/>
    <choose-send-type-dialog/>
    <group-order-join-dialog/>
    <my-socket/>
    <choose-order-pay-type-dialog/>
    <change-city-dialog/>
    <commission-detail-dialog/>
    <order-start-send-dialog/>
    <order-apply-handler-dialog/>
    <choose-address-dialog/>
    <order-apply-start-send-dialog/>
    <product-add-model-dialog/>
    <create-model-dialog/>
    <manager-model-dialog/>
    <show-system-apply-log-dialog/>
    <play-music/>
    <!--    <div style="position: fixed; width: 100px; height: 100px; background: red; top: 50px; right: 50px"-->
    <!--         @click="clearChoose">-->
    <!--    </div>-->
  </div>
</template>

<script>
import MyNav from './components/common/MyNav'
import SendSmsDialog from './components/common/SendSmsDialog'
import ProductChooseModelDialog from './components/common/ProductChooseModelDialog'
import CartSubmitDialog from './components/common/CartSubmitDialog'
import ShopSendTimeDialog from './components/common/ShopSendTimeDialog'
import ChooseDateTimeDialog from './components/common/ChooseDateTimeDialog'
import OrderExpressMoreDialog from './components/common/OrderExpressMoreDialog'
import ChooseLogFormDialog from './components/common/ChooseLogFormDialog'
import ChooseSexDialog from './components/common/ChooseSexDialog'
import ChooseDateDialog from './components/common/ChooseDateDialog'
import MySocket from './components/common/MySocket'
import ChooseProductClassifyDialog from './components/common/ChooseProductClassifyDialog'
import ChooseCouponDialog from './components/common/ChooseCouponDialog'
import ChooseSendTypeDialog from './components/common/ChooseSendTypeDialog'
import GroupOrderJoinDialog from './components/common/GroupOrderJoinDialog'
import ChooseOrderPayTypeDialog from './components/common/ChooseOrderPayTypeDialog'
import ChangeCityDialog from './components/common/ChangeCityDialog'
import CommissionDetailDialog from './components/common/CommissionDetailDialog'
import Vue from 'vue'
import CurrUser from './components/global/CurrUser'
import OrderStartSendDialog from './components/common/OrderStartSendDialog'
import OrderApplyHandlerDialog from './components/common/OrderApplyHandlerDialog'
import ChooseAddressDialog from './components/common/ChooseAddressDialog'
import OrderApplyStartSendDialog from './components/common/OrderApplyStartSendDialog'
import ProductAddModelDialog from './components/common/ProductAddModelDialog'
import CreateModelDialog from './components/common/CreateModelDialog'
import ManagerModelDialog from './components/common/ManagerModelDialog'
import ShowSystemApplyLogDialog from './components/common/ShowSystemApplyLogDialog'
import RoleTools from './components/Tools/RoleTools'
import PlayMusic from "./components/common/PlayMusic";

export default {
  name: 'App',
  components: {
    PlayMusic,
    ShowSystemApplyLogDialog,
    ManagerModelDialog,
    CreateModelDialog,
    ProductAddModelDialog,
    OrderApplyStartSendDialog,
    ChooseAddressDialog,
    OrderApplyHandlerDialog,
    OrderStartSendDialog,
    CommissionDetailDialog,
    ChangeCityDialog,
    ChooseOrderPayTypeDialog,
    GroupOrderJoinDialog,
    ChooseSendTypeDialog,
    ChooseCouponDialog,
    ChooseProductClassifyDialog,
    MySocket,
    ChooseDateDialog,
    ChooseSexDialog,
    ChooseLogFormDialog,
    OrderExpressMoreDialog,
    ChooseDateTimeDialog,
    ShopSendTimeDialog, CartSubmitDialog, ProductChooseModelDialog, SendSmsDialog, MyNav
  },
  mounted () {
    let $this = this
    $this.isAppAgreement=true
    $this.isInit=true

    // 登录成功,重新获取是否绑定店铺状态
    $this.bus.$on('UserLoginCallBus', function () {
      $this.isAppAgreement=true
      $this.isInit=true
      $this.$forceUpdate()
      setTimeout(function () {
        $this.getUserInfo()
      }, 1000)
    })




    // $this.paddingTop=$this.getSafeArea().top


    this.isAppAgreement=true
    // 375  667
    var winSize = this.getWinSize()
    if (winSize.width > 1024) {
      this.mainSize.width = '375px'
      this.mainSize.height = '667px'
      this.navMaxWidth = '375px'
      this.navTop = '627px'
    }


    // 登录用户检查线上登录状态
    if ($this.CurrUser.IsLogin()) {
      $this.getUserInfo()
    }

    if ($this.$route.path==='/Login'){
      $this.isInit=true
    }

    $this.bus.$on('OpenOrderMessageCallBus', function (params) {
      if ($this.currNotifyMap[params] && typeof ($this.currNotifyMap[params].close) === 'function') {
        $this.currNotifyMap[params].close()
      }
    })



    // 新订单消息
    this.bus.$on('NewOrderMessage', function (data) {
      var eventTypeMap={
        NewOrder:'【新订单】消息',
        NewOrderApply:'【新退货单】消息',
      }

      data.message=JSON.parse(data.message)
      var currPageHash='/#/'+data.eventType.replace("New","")+"Detail?id="+data.message.id+"&time="+Math.random();
      $this.currNotifyMap[data.eventType.replace("New","")+'_'+data.message.id]=$this.$notify({
        title: eventTypeMap[data.eventType],
        message: data.message.content+'<a href="'+currPageHash+'">点击查看</a>',
        position: 'bottom-right',
        dangerouslyUseHTMLString: true,
        type: 'success',
        duration: 0
      });
      // $this.$forceUpdate()
    })

    $this.$forceUpdate()
  },
  watch:{
    '$route':function () {
      if (this.$route.path==='/Login'){
        this.isInit=true
        this.$forceUpdate()
      }
    }
  },
  data: function () {
    return {
      currNotifyMap:{},
      isInit:false,
      isAppAgreement:false,
      mainSize: {
        width: 'auto',
        height: 'auto',
      },
      navMaxWidth: '',
      navTop: '',
      paddingTop:0
    }
  },
  methods: {
    // 如果有登录状态,则获取会员信息
    getUserInfo: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Shop/info', {}, function (data) {
        RoleTools.cacheAction(JSON.parse(data.role.actionArr))
        setTimeout(function () {
          $this.isInit=true
          $this.$forceUpdate()
          $this.bus.$emit('RoleActionUpdateCallBus')
        },3000)
        // console.log('data.role.actionArr',data.role.actionArr)
        $this.$forceUpdate()
      }, function (msg) {
        $this.$message.error(msg)
        // $this.form.password = ''
      })
    },
  }
}
</script>

<style>
@import "assets/css/common.css";
@import "https://at.alicdn.com/t/c/font_3589419_uyr1yl6uuy.css?spm=a313x.7781069.1998910419.80&file=font_3589419_uyr1yl6uuy.css";
</style>
